<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>AngularJS pagination plugin demo page</title>
  <link rel="stylesheet" href="./default.css" />
</head>
<body>
  <div class="container" ng-app="app" ng-controller="Controller">
    <fieldset>
      <legend>配置</legend>
      <form>
        <p>
          <label for="size">Size</label>
          <input id="size" ng-model="paginationOptions.size" type="number" />
        </p>
        <p>
          <label for="page">Page</label>
          <input id="page" ng-model="paginationOptions.page" type="number" />
        </p>
        <p>
          <label for="step">Step</label>
          <input id="step" ng-model="paginationOptions.step" type="number" />
        </p>
      </form>
    </fieldset>
    <fieldset>
      <legend>预览</legend>
      <pagination
        size="paginationOptions.size"
        page="paginationOptions.page"
        step="paginationOptions.step">
      </pagination>
    </fieldset>
  </div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js" charset="utf-8"></script>
<script src="http://cdn.bootcss.com/angular.js/1.6.5/angular.js" charset="utf-8"></script>
<script src="../dist/pagination.module.min.js" charset="utf-8"></script>
<script type="text/javascript">
  (function (angular){
    var appModule = angular.module('app' ,['pagination.module']);
    appModule.controller('Controller' ,[
      '$scope' ,
      function ($scope){
        $scope.paginationOptions = {
          size: 23 ,
          page: 1 ,
          step: 1 ,
        };
        $scope.onPageChange = function (pageNumber ,event){
          console.log(`$scope.onPageChange(${pageNumber} ,${event})`);
        };
      } ,
    ]);
  }(angular))
</script>
</html>
